<template>
  <div class="nav">
    <div class="home" @click="home">首页</div>
    <div class="headerContent">
      <div class="inputContentBackground">
        <tip :tip-msg="tipMsg" :tip-rank="'error'" :tip-style="{
          width: '330px',
          'padding-top': '10px'
        }"/>
        <div class="inputContent">
          <inputCommon
            :name="'phone'"
            :inputType="'phone'"
            :placeholder="'请输入手机号'"
            @inputChange="inputPhone"
          />
          <inputCommon
            class="inputCommon"
            :name="'password'"
            :inputType="inputTypePassword"
            :placeholder="'请输入密码(8-20位)'"
            @inputChange="inputChange"
          />
          <div style="display: inline-block">
            <inputCommon
              class="inputCommon"
              style="float:left;"
              :name="'verifyCode'"
              :placeholder="'验证码'"
              :inputType="inputTypeText"
              :inputStyle="{
                  width: '198px'
                }"
              @inputChange="inputChange"
            />
            <verifyButtonCommon
              class="verifyButtonClass inputCommon"
              style="float:right;"
              :btnMsg="verifyButtonMsg"
              :phone="phone"
              :url="regsMobileUrl"
              @checkPhone="regsSendSms"
            />
          </div>

          <buttonCommon
            class="buttonClass inputCommon"
            @buttonClick="phoneClick"
            :btnMsg="'立即注册'"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import inputCommon from '@/components/common/input.vue'
  import buttonCommon from '@/components/common/button.vue'
  import verifyButtonCommon from '@/components/common/verifyButton.vue'
  import tip from '@/components/common/tip.vue'
  import commonUtil from "../util/common";
  import md5 from "../util/md5";


  export default {
    data() {
      return {
        postData: {},
        phone: '',
        tipMsg: '',
        emailConstLists: [
          '@qq.com',
          '@163.com',
          '@gmail.com',
          '@126.com',
          '@263.net',
          '@aliyun.com',
          '@foxmail.com'
        ],
        emailLists: [],
        emailTipShow: false,
        currentIndex: 0,
        canClick: true,
        verifyTotalTime: 60,
        regsMobileUrl: this.api.sendRegsSms,

        inputTypeText: 'text',
        inputTypePassword: 'password',
        verifyButtonMsg: '获取验证码',
        inputVerifyCommonWidth: '198px',
        inputWidth: '308px',
        inputVerifyWidth: '198px',
        inputHeight: '48px'
      }
    },
    methods: {
      home() {
        this.$router.push("/")
      },
      inputChange(name, val) {
        this.postData[name] = val
      },
      inputPhone(name, val) {
        this.phone = val
      },
      emailInput(name, val) {
        if (val === undefined || val === '') {
          this.emailTipShow = false
          return
        } else {
          this.emailTipShow = true
        }
        this.currentIndex = 0
        let emailTemp = val.split('@')
        let emailTempArray = []
        // 清空以前输入的参考
        this.emailLists.splice(0, this.emailLists.length)
        // 重新组装输入参考

        this.emailConstLists.forEach(email => {
          if (email.search(emailTemp[1]) !== -1) {
            this.emailLists.push(emailTemp[0] + email)
          }
          emailTempArray.push(val + email)
        })
        this.emailLists =
          this.emailLists.length > 0 ? this.emailLists : emailTempArray
      },
      regsSendSms() {
        let phone = this.phone
        if (phone === undefined) {
          this.tipMsg = '请输入手机号'
          return
        }
        if (!commonUtil.checkPhone(phone)) {
          this.tipMsg = '请检查手机号'
        }
      },
      regsSendEmail() {
        // todo 发送邮箱验证码
      },
      phoneClick() {
        let phone = this.phone
        let password = this.postData['password']
        let verifyCode = this.postData['verifyCode']

        if (phone === undefined || !commonUtil.checkPhone(phone)) {
          this.tipMsg = '请检查手机号'
          return
        }
        if (password === undefined || password.length < 8 || password.length > 20) {
          this.tipMsg = '请检查密码'
          return
        }
        if (verifyCode === undefined || verifyCode === '') {
          this.tipMsg = '请检查验证码'
          return
        }
        password = md5(password)
        this.$axios({
          url: this.api.regsMobileCode,
          params: {
            "code": verifyCode,
            "password": password,
            "phone": phone
          },
          method: 'post'
        }).then(res => {
          if (res.state !== 0) {
            this.tipMsg = res.msg
          } else {
            // todo 注册成功
            this.$router.push('/login')
          }
        })
      },
      emailClick() {
        // todo 邮箱注册
      },
      emailKeyUp() {
        if (!this.emailTipShow) return
        if (this.currentIndex === 0) {
          this.currentIndex = this.emailLists.length - 1
        } else {
          this.currentIndex--
        }
      },
      emailKeyDown() {
        if (!this.emailTipShow) return
        if (this.currentIndex === this.emailLists.length - 1) {
          this.currentIndex = 0
        } else {
          this.currentIndex++
        }
      },
      emailKeyEnter() {
        if (!this.emailTipShow) return
        this.emailTipShow = false
        this.email = this.emailLists[this.currentIndex]
      },
      emailListClick(index) {
        this.email = this.emailLists[index]
        this.emailTipShow = false
      }
    },
    components: {
      inputCommon,
      buttonCommon,
      verifyButtonCommon,
      tip
    }
  }
</script>

<style scoped>
  .nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: cover;
    background: url(../assets/images/regs.jpg) no-repeat 50% 50%;
    z-index: 1;
  }

  .home {
    font-size: 25px;
    margin-top: 30px;
    cursor: pointer;
  }

  .headerContent {
    position: relative;
    top: 115px;
    left: 38%;
    width: 380px;
  }

  .headerChoice {
    margin: 2px 0;
  }

  .inputContentBackground {
    background: rgba(181, 181, 181, 1);
    opacity: 0.8;
    width: 380px;
  }

  .inputContent {
    padding: 28px 36px 0px 36px;
  }

  .inputCommon {
    padding-top: 34px;
  }

  .verifyButtonClass {
  }

  .emailListClass {
    border: 1px solid #70c2ec;
    background: #fff;
    position: absolute;
    z-index: 10;
    text-align: left;
    display: block;
    border-radius: 1px;
    margin: 0;
  }

  .emailListClass ul {
    margin: 0px;
    padding: 0px;
    text-align: left;
  }

  .emailListClass li {
    font-size: 12px;
    list-style: none;
    height: 31px;
    padding-left: 10px;
    line-height: 31px;
    margin: 0;
    overflow: hidden;
    color: black;
  }

  .emailListClass li:hover {
    background: #51b7ec;
  }

  .emailListActiveClass {
    background: #cbe2fa;
  }

  .phoneRegs {
    cursor: pointer;
    margin: 0 36px;
    display: inline-block;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(98, 98, 98, 1);
  }

  .buttonClass {
    padding-bottom: 23px;
  }

  .emailRegs {
  }

  .active {
    border-bottom: 2px solid rgba(0, 153, 68, 1);
    border-radius: 1px;
  }
</style>
